import React, { Component } from 'react'

import styles from './DataAnalysis.less'
import cx from 'classnames'
import { observer, inject } from 'mobx-react'
import moment from 'moment'
// import echarts from 'echarts'
const echarts = require('echarts/lib/echarts')
		// 引入柱状图
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

@inject('dataAnalysis')
@observer
class DataAnalysis extends Component {

	constructor(props) {
		super(props)
		this.dataAnalysis = this.props.dataAnalysis
	}


	componentDidMount() {
		// 基于准备好的dom，初始化echarts实例
		let myChart = echarts.init(document.getElementById('line'));
		let myChart1 = echarts.init(document.getElementById('pie'));
		// 绘制图表
		this.dataAnalysis.doGetDataAnalysis().then((list) => {
			myChart1.setOption({
				title : {
			        text: '标签文章饼图',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient : 'vertical',
			        x : 'left',
			        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            magicType : {
			                show: true, 
			                type: ['pie', 'funnel'],
			                option: {
			                    funnel: {
			                        x: '25%',
			                        width: '50%',
			                        funnelAlign: 'left',
			                        max: 1548
			                    }
			                }
			            },
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    calculable : true,
			    series : [
			        {
			            name:'访问来源',
			            type:'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data: this.dataAnalysis.list
			        }
			    ]
			})
			console.log(this.dataAnalysis.seven)

			myChart.setOption({
			    title: {
			        text: '七天发布文章柱状图'
			    },
			    tooltip: {},
			    xAxis: {
			        data: this.sevenDate()
			    },
			    yAxis: {},
			    series: [{
			        name: '文章数量',
			        type: 'line',
			        data: Object.values(this.dataAnalysis.seven).reverse()
			    }]
			});
		})
	}

	//生成七天日期
	sevenDate() {
		var result = []
		for(var i = 6; i >= 0; i--) {
			result.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
		}
		return result
	}


	render() {
		return (
			<div className="box">
				<div className="shadow"></div>
				<div className={cx('content', styles.wrapper)}>
					<div id="line" className={styles.line}></div>
					<div id="pie" className={styles.pie}></div>
				</div>
			</div>
		)
	}
}

export default DataAnalysis